import * as THREE from 'three';
import { BufferGeometry, Color, Face3, Geometry, Material } from 'three';
import BaseThreeApp from '../BaseThreeApp';
import DebugInfo from '../DebugInfo';

class _6_1Geometry extends BaseThreeApp {
  public scene: THREE.Scene;
  public camera: THREE.Camera;
  public renderer: THREE.WebGLRenderer;
  public geos: (Geometry | BufferGeometry)[] = [];
  public mats: Material[] = [];

  start() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(
      60,
      this.clientWidth / this.clientHeight,
      0.1,
      1000
    );
    this.camera.position.z = 5;

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.element,
    });

    this.renderer.setDrawingBufferSize(this.clientWidth, this.clientHeight, 1);

    const geo = new THREE.Geometry();
    this.geos.push(geo);
    const mat = new THREE.MeshBasicMaterial({
      vertexColors: true,
      //   wireframe: true,
      side: THREE.DoubleSide,
    });
    this.mats.push(mat);
    geo.vertices.push(new THREE.Vector3(0, 1, 0));
    geo.vertices.push(new THREE.Vector3(1, -1, 0));
    geo.vertices.push(new THREE.Vector3(-1, -1, 0));
    const c1 = new THREE.Color(0xff0000);
    const c2 = new THREE.Color(0x00ff00);
    const c3 = new THREE.Color(0x0000ff);
    const face1 = new Face3(0, 1, 2); //通过索引创建三角形
    // geo.colors.push(c1, c2, c3, c4);
    face1.vertexColors.push(c1, c2, c3);
    geo.faces.push(face1);
    geo.computeFaceNormals();

    const mesh = new THREE.Mesh(geo, mat);
    mesh.position.x = -1.5;
    this.scene.add(mesh);

    const bufferGeo = new BufferGeometry();
    this.geos.push(bufferGeo);
    // bufferGeo.fromGeometry(geo);
    const vertices: number[] = [];
    const colors: number[] = [];
    const indexes: number[] = [];

    vertices.push(-1, 1, 0); // 第1个顶点
    vertices.push(1, 1, 0); // 第2个顶点
    vertices.push(-1, -1, 0); // 第3个顶点
    vertices.push(1, -1, 0); // 第4个顶点
    colors.push(1, 0, 0);
    colors.push(0, 1, 0);
    colors.push(0, 0, 1);
    colors.push(1, 1, 0);

    indexes.push(0, 1, 2); // 第1个三角形
    indexes.push(2, 1, 3); // 第2个三角形

    bufferGeo.setIndex(indexes);
    bufferGeo.setAttribute(
      'position',
      new THREE.Float32BufferAttribute(new Float32Array(vertices), 3)
    );
    bufferGeo.computeVertexNormals();
    bufferGeo.setAttribute(
      'color',
      new THREE.Float32BufferAttribute(colors, 3)
    );

    const mesh2 = new THREE.Mesh(bufferGeo, mat);
    mesh2.position.x = 1;
    this.scene.add(mesh2);

    this.isRunning = true;
    const animate = (time) => {
      if (!this.isRunning || this.element === null) {
        return;
      }
      DebugInfo.Instance.begin();
      this.renderer.render(this.scene, this.camera);
      DebugInfo.Instance.end();
      requestAnimationFrame(animate);
    };
    animate(0);
  }

  onresize(e: UIEvent) {
    super.onresize(e);
    console.log('onresive');
    if (this.renderer) {
      this.renderer.setDrawingBufferSize(
        this.clientWidth,
        this.clientHeight,
        1
      );
      if (this.camera && this.camera instanceof THREE.PerspectiveCamera) {
        this.camera.aspect = this.clientWidth / this.clientHeight;
        this.camera.updateProjectionMatrix();
      }
    }
  }

  destory() {
    this.geos.forEach((v) => v.dispose());
    this.geos = [];
    this.mats.forEach((v) => v.dispose());
    this.mats = [];
    super.destory();
  }
}

export default new _6_1Geometry();
